<template>
	<view>
		<uni-popup type="center" ref="takePhone" :maskClick="false">
			<view class="takephone-wrap">
				<image class="kefu-tu" :src="www + 'imgs/other/kefu.png'" mode=""></image>
				<view class="tp-red tp-fz32 tp-lh44 tp-mt30">
					点击拨打电话联系客服
				</view>
				<view class="phone_list">
					<view class="phone_item center_combo tp-ptb0lr30 tp-bbox" v-for="(item, index) in servicePhoneList" :key="index" @click="handleTakePhone(item)">
						<image class="phone-icon" src="../../static/imgs/icons/phone1-icon.png" mode=""></image>
						<view class="level_align">
							<text class="tp-mr10 tp-fc333 tp-fz30">{{type | typeName}}：</text>
							<text class="num">{{item}}</text>
						</view>
					</view>
				</view>
				<uni-icons @click="hide" class="close-icon" type="close" size="34" color="#fff"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array
			},
			type: {
				type: [Number,String],
				default(){
					return '2'
				}
			}
		},
		filters:{
			typeName(v){
				if (v === '0') {
					return '班车调度'
				} else if (v === '1') {
					return '接送调度'
				} else if (v === '2') {
					return '拼车调度'
				} else if (v === '3') {
					return '包车调度'
				} else if (v === '4') {
					return '租车调度'
				} else if (v === '5') {
					return '咨询客服'
				} else if (v === '6') {
					return '退票客服'
				}  else if (v === '7') {
					return '酒店客服'
				} else if (v === '8') {
					return '景区客服'
				}  else if (v === '9') {
					return '跟团游客服'
				}  else if (v === '10') {
					return '定制游客服'
				}  else if (v === '11') {
					return '积分商城客服'
				} 
			}
		},
		data() {
			return {
				servicePhoneList: [],
				typeNameList:[]
			};
		},
		created() {
			this.getServicePhone()
		},
		methods: {
			show() {
				this.$refs.takePhone.open()
			},
			hide() {
				this.$refs.takePhone.close()
			},
			handleTakePhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				})
			},
			getServicePhone() {
				this.$http.get(this.$api.getServicePhone, {type:this.type}).then(res => {
					if (res.code === 200) {
						this.servicePhoneList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.takephone-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 546rpx;
		border-radius: 20rpx;
		background-color: #fff;
		position: relative;
		padding-bottom: 60rpx;
		margin-top: -80rpx;

		
		.kefu-tu{
			width: 546rpx;
			height: 278rpx;
		}
	
		.close-icon {
			position: absolute;
			bottom: -110rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;
		}
	
		.phone_list {
			width: 100%;
			.phone_item {
				font-size: 30rpx;
				margin-top: 40rpx;
	
				.phone-icon {
					height: 32rpx;
					width: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>
